<script setup lang="ts">
import ActivitInfo from "@/components/Activit/activitInfo.vue";
import { useI18n } from "vue-i18n";
import { ActivityAxios } from "@/api";
import { onMounted, ref } from "vue";
import levelLogo1 from "@/image/new_img/activity/actlevel/rankv2_rank12.png";
import levelLogo2 from "@/image/new_img/activity/actlevel/rankv2_rank21.png";
import levelLogo3 from "@/image/new_img/activity/actlevel/rankv2_rank31.png";
import levelLogo4 from "@/image/new_img/activity/actlevel/rankv2_rank41.png";
import levelLogo5 from "@/image/new_img/activity/actlevel/rankv2_rank51.png";
import levelLogo6 from "@/image/new_img/activity/actlevel/rankv2_rank61.png";
import levelLogo7 from "@/image/new_img/activity/actlevel/rankv2_rank22.png";
import levelLogo8 from "@/image/new_img/activity/actlevel/rankv2_rank32.png";
import levelLogo9 from "@/image/new_img/activity/actlevel/rankv2_rank42.png";
import levelLogo10 from "@/image/new_img/activity/actlevel/rankv2_rank52.png";
import levelLogo11 from "@/image/new_img/activity/actlevel/rankv2_rank62.png";
import { FiltrationFun } from "@/utils";
import { showSuccessToast } from "vant";
const { t } = useI18n();
onMounted(() => {
  getLevelInfo();
  getUserSevenRevenue();
});
const levelList: any = ref([]);
const levelogolist: any = ref([
  levelLogo1,
  levelLogo2,
  levelLogo3,
  levelLogo4,
  levelLogo5,
  levelLogo6,
]);

//获取等级信息
const getLevelInfo = () => {
  ActivityAxios.getLevelInfo({ actType: 7 }).then(res => {
    levelList.value = res.list;
    levelogolist.value.forEach((item, index) => {
      levelList.value[index].requiredCensoring = levelList.value[index].requiredCensoring / 100;
      levelList.value[index].logo = item;
    });
  });
};
const userLevelInfo: any = ref({ curLevel: "", flag: 0, level: 0, list: [], revenue: 0 });
//获取用户游戏近7天流水和可领取奖励
const getUserSevenRevenue = () => {
  ActivityAxios.getUserSevenRevenue().then(res => {
    userLevelInfo.value = res;
    if (userLevelInfo.value.level > 0) {
      const imgList = filtrationFun(userLevelInfo.value.level);
      imgList.forEach((item, index) => {
        levelList.value[index].logo = item;
      });
    }
  });
};
//领取活动等级奖励
const getReceiveLevel = () => {
  ActivityAxios.getReceiveLevel().then(() => {
    showSuccessToast("successes");
    getUserSevenRevenue();
  });
};
//过滤图片
const filtrationFun = level => {
  const images = [levelLogo1];
  if (level === 1) {
    images.push(levelLogo7, levelLogo3, levelLogo4, levelLogo5, levelLogo6);
  } else if (level === 2) {
    images.push(levelLogo7, levelLogo8, levelLogo4, levelLogo5, levelLogo6);
  } else if (level === 3) {
    images.push(levelLogo7, levelLogo8, levelLogo9, levelLogo5, levelLogo6);
  } else if (level === 4) {
    images.push(levelLogo7, levelLogo8, levelLogo9, levelLogo10, levelLogo6);
  } else if (level === 5) {
    images.push(levelLogo7, levelLogo8, levelLogo9, levelLogo10, levelLogo11);
  }
  return images;
};
//过滤名字
const filtrationLevelName = level => {
  const levelName = ref("");
  if (level === 0) {
    levelName.value = t("activity.levelRewardsPage.iron");
  } else if (level === 1) {
    levelName.value = t("activity.levelRewardsPage.bronze");
  } else if (level === 2) {
    levelName.value = t("activity.levelRewardsPage.silver");
  } else if (level === 3) {
    levelName.value = t("activity.levelRewardsPage.gold");
  } else if (level === 4) {
    levelName.value = t("activity.levelRewardsPage.platinum");
  } else if (level === 5) {
    levelName.value = t("activity.levelRewardsPage.diamond");
  }
  return levelName;
};
</script>
<template>
  <!-- 等级奖励 -->
  <div class="levelRewards-frame">
    <div class="levelRewards-div-frame">
      <img src="@/image/new_img/activity/actlevel/rankv2_bg.png" class="background-img-content" />
      <div
        class="van-circle"
        style="width: 6.8rem; height: 6.8rem; position: absolute; top: 1.2rem; left: 1.6rem"
      >
        <svg viewBox="0 0 1015 1015">
          <path
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__layer"
            style="fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 15px"
          />
          <path
            v-if="userLevelInfo.level === 0"
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__hover"
            style="stroke: rgb(255, 0, 182); stroke-width: 16px; stroke-dasharray: 502.4px, 3140px"
          />
          <path
            v-if="userLevelInfo.level === 1"
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__hover"
            style="stroke: rgb(255, 0, 182); stroke-width: 16px; stroke-dasharray: 1070.4px, 3140px"
          />
          <path
            v-if="userLevelInfo.level === 2"
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__hover"
            style="stroke: rgb(255, 0, 182); stroke-width: 16px; stroke-dasharray: 1570.4px, 3140px"
          />
          <path
            v-if="userLevelInfo.level === 3"
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__hover"
            style="stroke: rgb(255, 0, 182); stroke-width: 16px; stroke-dasharray: 2070.4px, 3140px"
          />
          <path
            v-if="userLevelInfo.level == 4"
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__hover"
            style="stroke: rgb(255, 0, 182); stroke-width: 16px; stroke-dasharray: 2570.4px, 3140px"
          />
          <path
            v-if="userLevelInfo.level === 5"
            d="M 507.5 507.5 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
            class="van-circle__hover"
            style="stroke: rgb(255, 0, 182); stroke-width: 16px; stroke-dasharray: 3140.4px, 3140px"
          />
        </svg>
      </div>
      <img class="rankv2-img" src="@/image/new_img/activity/actlevel/rankv2_top_bg.png" />
      <img class="atclogo-frame" :src="FiltrationFun.getActLeve()" />
      <div class="levelRewards-content">
        <div class="level-name">{{ filtrationLevelName(userLevelInfo.level) }}</div>
        <div class="level-text-name">{{ t("activity.levelRewardsPage.currentLevel") }}</div>
        <div class="level-value">{{ FiltrationFun.formatNumber(userLevelInfo.revenue / 100) }}</div>
        <div class="level-info-frame">{{ t("activity.levelRewardsPage.actTitle") }}</div>
        <div
          v-for="(item, index) in levelList"
          :class="'rankv2-rank12-frame' + (index + 1)"
          :key="index"
        >
          <img class="rankv2-rank12" :src="item.logo" />
          <div
            class="textframe fw-wrap"
            :class="[userLevelInfo.level < item.level ? 'back-frame' : '']"
          >
            <div class="textframe-name">{{ filtrationLevelName(item.level) }}</div>
            <div class="textframe-amount">
              {{ FiltrationFun.formatNumber(item.requiredCensoring) }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 六个等级 -->
    <div class="levelRewards-content-frame">
      <div class="level-tips-frame">
        <div class="middle-bg-img-frame">
          <img class="middle-bg-img" src="@/image/new_img/activity/actlevel/rankv2_middle_bg.png" />
          <div class="middle-bg-text">{{ t("activity.levelRewardsPage.getBonusTitle") }}</div>
        </div>
        <div class="reward-levels-frame" v-for="(item, index) in userLevelInfo.list" :key="index">
          <div class="reward-levels-img">
            <img src="@/image/new_img/activity/actlevel/rankv2_item_bg.png" />
            <div class="time-frame df">
              <div class="day-frame">
                {{ t("activity.levelRewardsPage.day") }} {{ item.continuityDay }}
              </div>
              <div class="get-money df ai-center jc-space-between">
                <div class="df ai-center money-mark">
                  <div class="df ai-center left-frame">
                    {{ t("currencyType.pt") }}
                    <div class="moeny-val">{{ item.claimAmount / 100 }}</div>
                  </div>
                  <div class="df ai-cente right-frame">
                    <div class="right-title4 df ai-center" v-if="item.claimFlag === 0">
                      {{ t("activity.levelRewardsPage.notFulfilled") }}
                    </div>
                    <div class="right-title4 right-title3 df ai-center" v-if="item.claimFlag === 1">
                      {{ t("activity.levelRewardsPage.Received") }}
                    </div>
                    <div
                      class="right-title2-img-frame"
                      v-if="item.claimFlag === 2"
                      @click="getReceiveLevel"
                    >
                      <img
                        class="right-title2-img"
                        src="@/image/new_img/activity/actlevel/rankv2_item_btn.png"
                      />
                      <div class="get-bottom-frame">
                        {{ t("activity.levelRewardsPage.receber") }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="activitInfo-frame">
      <ActivitInfo :actType="7" :title="t('activity.eventDescription')" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.levelRewards-frame {
  width: 100%;
  height: 100%;
  background-color: #1b0a24;
  position: relative;
  left: 0;
  top: 0;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
  .background-img-content {
    width: 100%;
    position: absolute;
    top: -0.3rem;
    left: 0;
  }
  .rankv2-img {
    width: 100%;
    position: absolute;
    top: -0.25rem;
    left: 0;
  }
  .atclogo-frame {
    position: absolute;
    left: 0;
    top: 2.8rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 3.4rem;
    height: 3.4rem;
  }
  .levelRewards-content-frame {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;

    .level-tips-frame {
      width: 100%;
      height: auto;
      background: rgba(255, 255, 255, 0.04);
      position: relative;
      left: 0;
      top: 0;
      .middle-bg-img-frame {
        width: 675px;
        height: 150px;
        margin: auto;
        position: relative;
        left: 0;
        top: 0;
        img {
          width: 675px;
          height: 150px;
        }
        .middle-bg-text {
          color: #00ffff;
          font-size: 24px;
          position: absolute;
          bottom: 30px;
          left: 0;
          right: 0;
          width: auto;
          margin: auto;
          text-align: center;
        }
      }
      .reward-levels-frame {
        width: 100%;
        height: auto;
        margin-top: 10px;
        .reward-levels-img {
          width: 675px;
          height: 104px;
          margin: auto;
          margin-bottom: 20px;
          position: relative;
          left: 0;
          top: 0;
          img {
            width: 675px;
            height: 104px;
          }
          .time-frame {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            .day-frame {
              width: 195px;
              height: 100px;
              text-align: center;
              line-height: 100px;
              font-size: 48px;
              color: #7fd0ff;
            }
            .get-money {
              width: calc(100% - 255px);
              height: 100%;
              padding-left: 60px;

              .money-mark {
                color: #7fd0ff;
                font-size: 26px;
                width: 100%;
                .moeny-val {
                  color: #00ffff;
                  font-size: 40px;
                  margin-left: 10px;
                }
                .left-frame {
                  flex: 1;
                  height: 100%;
                }
                .right-frame {
                  width: 50%;
                  height: 100%;
                  margin-right: 20px;
                }
                .right-title4 {
                  color: rgba(255, 255, 255, 0.15);
                  font-size: 28px;
                  margin-left: 38px;
                }
                .right-title3 {
                  color: #4fff00;
                  margin-left: 60px;
                }
                .right-title2-img-frame {
                  position: relative;
                  left: 0;
                  top: 0;
                  margin-right: 66px;
                  .right-title2-img {
                    width: 228px;
                    height: 75px;
                  }
                  .get-bottom-frame {
                    position: absolute;
                    top: 20px;
                    left: 0;
                    right: 0;
                    margin: auto;
                    text-align: center;
                    color: #00ffff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.levelRewards-div-frame {
  width: 100%;
  height: auto;
  position: relative;
  left: 0;
  right: 0;
}
.levelRewards-content {
  width: 100%;
  height: 810px;
  position: relative;
  left: 0;
  top: 0;
  .rankv2-rank12-frame1 {
    position: absolute;
    right: 176px;
    top: 75px;
    width: 146px;
    height: 146px;
    z-index: 3;
  }
  .rankv2-rank12-frame6 {
    position: absolute;
    left: 176px;
    top: 75px;
    width: 146px;
    height: 146px;
    z-index: 3;
  }
  .rankv2-rank12-frame5 {
    position: absolute;
    left: 60px;
    top: 285px;
    width: 146px;
    height: 146px;
    z-index: 3;
  }
  .rankv2-rank12-frame4 {
    position: absolute;
    left: 176px;
    bottom: 170px;
    width: 146px;
    height: 146px;
    z-index: 3;
  }
  .rankv2-rank12-frame3 {
    position: absolute;
    right: 176px;
    bottom: 170px;
    width: 146px;
    height: 146px;
    z-index: 3;
  }
  .rankv2-rank12-frame2 {
    position: absolute;
    right: 60px;
    top: 285px;
    width: 146px;
    height: 146px;
    z-index: 3;
  }
  .rankv2-rank12 {
    width: 146px;
    height: 146px;
  }

  .textframe {
    width: 104px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 0, 182, 0.75);
    color: #ffffff;
    font-size: 24px;
    border-radius: 10px;
    position: absolute;
    bottom: -30px;
    left: 20px;
    z-index: 4;
    .textframe-name {
      width: 100%;
      height: auto;
      font-size: 24px;
      text-align: center;
    }

    .textframe-amount {
      margin-top: -10px;
      font-size: 24px;
    }
  }
  .back-frame {
    background: #00000080;
  }
  .level-info-frame {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 70px;
    color: #ffffff;
    font-size: 24px;
    width: 90%;
    text-align: center;
  }
  .level-value {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    bottom: 100px;
    text-align: center;
    font-weight: 700;
    color: #00ffff;
    font-size: 48px;
  }
  .level-text-name {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    bottom: 290px;
    color: #00ffff;
    text-shadow: 0 0 6px #ff00b6;
    font-size: 24px;
    text-align: center;
    z-index: 3;
  }
  .level-name {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    bottom: 335px;
    font-size: 64px;
    font-weight: 700;
    text-align: center;
    color: #00ffff;
    text-shadow: 0 0 6px #ff00b6;
    z-index: 3;
  }
}
.activitInfo-frame {
  width: 675px;
  height: auto;
  margin: auto;
  margin-top: 40px;
}
</style>
